@using AntDesign.Charts
@using Title = AntDesign.Charts.Title
@inject NavigationManager NavigationManager
@inject HttpClient HttpClient

<Tabs ActiveKeyChanged="OnTabChanged">
    <TabPane Key="1">
        <TabTemplate>基础面积图</TabTemplate>
        <ChildContent>
            <Area @ref="chart1" Config="config1" OnFirstRender="onChart1_FirstRender" />
        </ChildContent>
    </TabPane>
    <TabPane Key="2">
        <TabTemplate>基础面积图-带缩略轴</TabTemplate>
        <ChildContent>
            <Area @ref="chart2" Config="config2" OnFirstRender="onChart2_FirstRender" />
        </ChildContent>
    </TabPane>
</Tabs>

@code {

    IChartComponent chart1;
    IChartComponent chart2;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        OnTabChanged("1");
    }


    private async Task OnTabChanged(string activeKey)
    {
        if (activeKey == "1")
        {
            var data1 = await ChartsDemoData.FireworksSalesAsync(NavigationManager, HttpClient);
            chart1.ChangeData(data1);
        }
        else
        {
            var data2 = await ChartsDemoData.SalesAsync(NavigationManager, HttpClient);
            chart2.ChangeData(data2);
        }
    }

    private async Task onChart1_FirstRender(IChartComponent chart)
    {
        var data1 = await ChartsDemoData.FireworksSalesAsync(NavigationManager, HttpClient);
        chart1.ChangeData(data1);
    }

    private async Task onChart2_FirstRender(IChartComponent chart)
    {
        var data2 = await ChartsDemoData.SalesAsync(NavigationManager, HttpClient);
        chart2.ChangeData(data2);
    }

    #region 示例1

    readonly AreaConfig config1 = new AreaConfig()
    {
        XField = "Date",
        YField = "scales",
        XAxis = new ValueCatTimeAxis()
        {
            Range = new[] { 0, 1 },
            TickCount = 5
        },
        AreaStyle = new GraphicStyle()
        {
            Fill = "l(270) 0:#ffffff 0.5:#7ec2f3 1:#1890ff"
        }
    };

    #endregion 示例1

    #region 示例2

    readonly AreaConfig config2 = new AreaConfig
    {
        Title = new Title
        {
            Visible = true,
            Text = "基础面积图 - 缩略轴"
        },

        Description = new Description
        {
            Visible = true,
            Text = "缩略轴 (slider) 交互适用于数据较多，用户希望关注数据集中某个特殊区间的场景。"
        },

        XField = "城市",
        XAxis = new ValueCatTimeAxis
        {
            Visible = true,
            Label = new BaseAxisLabel
            {
                Visible = true,
                AutoHide = true,
            }
        },
        YField = "销售额",

        // Interactions = new Interaction[]
        // {
        // new Interaction
        // {
        // Type="slider",
        // Cfg = new
        // {
        // start =0.5,
        // end =0.55
        // }
        // }
        // }
        Slider = new Slider()
        {
            Start = 0.5,
            End = 0.55,
            TrendCfg = new TrendCfg()
            {
                IsArea = true,
            },
        }
    };

    #endregion 示例2

}